<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="/style/home.css" rel="stylesheet" />
  <script src="/script/list-config.js"></script>
  <style>
    .btnBox{
      text-align: right;
      margin: 10px;
    }
    #table .img{
      width: 50%;
      height: 100px;
      text-align: center;
    }
    #table .url{
      width: 40%;
    }
    #table .img img{
      display: inline-block;
      width: auto;
      height: 100%;
    }
    #table input{
      width: 100%;
      height: 100%;
      background-color: transparent;
    }
    #table input:focus{
      outline-offset: 0;
      outline: 0;
    }
  </style>
</head>
<body>
<div class="btnBox">
  <button class="btn btn-info" id="btn-img-upload">添加图片</button>
  <button class="btn btn-primary" onclick="SubmitBanner()">保存</button>
</div>
<table id="table" class="table table-bordered table-hover" data-post="">
  <thead>
  <tr>
    <th>产品图片</th>
    <th>链接地址</th>
    <th>排序</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<div class="input-group">
  <span class="input-group-addon"></span>
  <input type="text" class="form-control spprd" placeholder="特殊产品名称">
  <span class="input-group-addon fix-border fix-padding"></span>
  <input type="text" class="form-control spprdXh" placeholder="排序">
</div>
</body>
</html>
<script src="/script/plugins/upload/js/config.js"></script>
<script>
  //上传图片
  $("#btn-img-upload").click(function () {
    $.WebUploader({
      uploader: { //图片上传配置
        fileNumLimit: 1000024, // 验证文件总数量, 超出则不允许加入队列
        fileSingleSizeLimit: 1230000000, //验证单个文件大小是否超出限制,单位计算/b
        succee: function (res) {
          Addspprd(res.Url,0)
        }
      }
    })
  });
  // 添加特殊产品实例
  function Addspprd(url,length) {
    var objHtml = '<tr><td class="img"><img src="' + url + '" alt=""/></td><td class="url"><input type="text"/></td><td class="xh"><input type="tel" value="' + length + '"/></td></tr>';
    $("#table tbody").append(objHtml);
  }

  //保存轮播图
  function SubmitBanner() {
    var spprdObj = $("#table tbody tr");
    var data = [];//内容
    spprdObj.each(function (i, item) {
      data.push({ "ProductLink": $(this).find(".url input").val(), "ProductPic": $(this).find(".img img").attr("src"), "SortId":$(this).find('.xh input').val()});
    });
    var request = {
      Title: $('.spprd').val(),
      JsonContent: JSON.stringify(data),
      UseStatus: 1,
      SortId: $('.spprdXh').val() ,
      IsSlide: 2
    };
    keepImg(request)
  }
  
  // 保存图片
  function keepImg(rquest){
    console.log(rquest)
    $.http.request('/homemanage/insert',rquest,{
      pass:function (res) {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
      },
      error:function (err) {
        console.log(err)
      }
    })
  }
</script>